<template >
	<div id="shopheader">
		<el-row>
		  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
		  <el-col :span="16">
			<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
			  <el-menu-item index="1"><router-link to="" style="text-decoration: none;">登录/注册</router-link></el-menu-item>
			  <el-menu-item index="2"><router-link to="/" style="text-decoration: none;">首页</router-link></el-menu-item>
			  <el-menu-item index="3"><router-link to="" style="text-decoration: none;">会员</router-link></el-menu-item>
			  <el-submenu index="4">
			    <template slot="title"><router-link to="" style="text-decoration: none;">个人信息</router-link></template>
			    <el-menu-item index="4-1">账户信息</el-menu-item>
			    <el-menu-item index="4-2">订单信息</el-menu-item>
			    <el-menu-item index="4-3">商品收藏</el-menu-item>
				<el-menu-item index="4-4">浏览记录</el-menu-item>
			  </el-submenu>
			  <el-menu-item index="5"><router-link to="" style="text-decoration: none;">客服联系</router-link></el-menu-item>
			  <el-menu-item index="6"><router-link to="" style="text-decoration: none;">品牌关注</router-link></el-menu-item>
			  <el-menu-item index="7"><router-link to="/shoppingcar" style="text-decoration: none;">购物车</router-link></el-menu-item>
			</el-menu> 
		  </el-col>
		</el-row>

		<hr>
	</div>
</template>

<script>
	export default {
		data() {
		      return {
		        activeIndex: '1'
		      };
		    },
		    methods: {
		      handleSelect(key, keyPath) {
		        // console.log(key, keyPath);
		      }
		    }
	}
</script>

<style>
	.el-col {
		min-height: 10px;
	}

	#shopheader {
		width: 80%;
		margin-left: 10%;
		min-width: 1500px;
	}
	.el-menu-demo {
		margin-left: 200px;
		border-bottom-color:#ffffff!important;
		min-width: 800px;
	}
	hr {
		position: relative;
		top: -3px;
		border-bottom:2px solid #CCCCCC;
		opacity: 0.3;
	}
</style>







